#![allow(non_snake_case)]
use icondata as i;
use leptos::prelude::*;
use leptos_icons::*;
use thaw_utils::BoxOneCallback;

use crate::TextArea;
// 确认对话框组件
#[component]
pub fn ConfirmButton(
    #[prop(into)] text: Oco<'static, str>,
    #[prop(into)] message: Oco<'static, str>,
    #[prop(optional, into)] is_feedback: bool,
    #[prop(optional, into)] icon: Option<i::Icon>,
    #[prop(default="btn btn-primary".into(),into)] class: Oco<'static, str>,
    #[prop(default="提示".into(),into)] title: Oco<'static, str>,
    #[prop(default="确定".into(),into)] confirm_text: Oco<'static, str>,
    #[prop(default="取消".into(),into)] cancel_text: Oco<'static, str>,
    #[prop(optional, into)] on_click: Option<Callback<(), bool>>,
    #[prop(optional, into)] on_ok: Option<BoxOneCallback<Option<String>>>,
) -> impl IntoView {
    let is_show = RwSignal::new(false);
    let feedback: RwSignal<Option<String>> = RwSignal::new(None);
    let err_msg: RwSignal<Option<String>> = RwSignal::new(None);
    let icon_view = move || {
        if let Some(icon) = icon {
            Some(view! { <Icon icon=icon/> })
        } else {
            None
        }
    };
    let mess_view = move || {
        if is_feedback {
            view! {
                <label class="form-control">
                    <TextArea value=feedback.get() placeholder={message.to_string()} on_change=move|fb|{
                        err_msg.set(None);
                        feedback.set(fb)
                    }/>
                    <div class="label">
                        <span class="label-text-alt text-error">{err_msg.get()}</span>
                    </div>
                </label>
            }.into_any()
        } else {
            view! { <h3 class="text-lg font-bold">{message.to_string()}</h3> }.into_any()
        }
    };
    view! {
        <button class={class} on:click=move |_| {
            if let Some(on_click) = &on_click {
                if !on_click.run(()) {
                    return;
                }
            }
            is_show.set(true)
        }>
            {icon_view}
            {text}
        </button>
        <div class="modal" class:modal-open=move||is_show.get()>
            <div class="modal-box overflow-hidden">
                <div class="flex items-center justify-between mb-4 rounded-t dark:border-gray-600">
                    <h3 class="text-xl font-medium text-gray-900 dark:text-white">
                        {title}
                    </h3>
                    <button type="button" on:click=move |_| is_show.set(false)
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
                        <Icon icon=i::AiCloseCircleOutlined width="20px" height="20px"/>
                    </button>
                </div>
                {mess_view}
                <div class="modal-action">
                    <button class="btn btn-sm" on:click=move|_|{
                        if let Some(on_ok) = &on_ok {
                            if !is_feedback {
                                is_show.set(false);
                                on_ok(None);
                                return;
                            }
                            if let Some(feedback_value) = feedback.get() {
                                is_show.set(false);
                                on_ok(Some(feedback_value));
                            }else {
                                err_msg.set(Some("反馈信息不能为空".to_string()));
                            }
                        }
                    }>
                        {confirm_text}
                    </button>
                    <button class="btn btn-sm" on:click=move|_|{
                        is_show.set(false);
                    }>
                        {cancel_text}
                    </button>
                </div>
            </div>
        </div>
    }
}
